import { DrawerForm } from '@ant-design/pro-form';
import { Divider, Image, Typography } from 'antd';

interface WeChatDrawerProps {
  trigger?: JSX.Element;
}

const WeChatDrawer: React.FC<WeChatDrawerProps> = ({ trigger }) => {
  return (
    <DrawerForm
      key="weChat_drawer"
      title="使用Chrome或Edge浏览器"
      trigger={trigger}
      autoFocusFirstInput
      drawerProps={{
        size: 'large',
        forceRender: true,
        destroyOnClose: true,
        width: '600px',
      }}
      submitter={false}
    >
      <Typography.Title level={3}>
        方法一、点击窗口右上角的菜单，找到【使用默认浏览器打开】，点击即可。
      </Typography.Title>
      <Image src="https://xtbs.ljsyy.net/resources/wechatBrowser/wechat-1.png" />
      <Divider />
      <Typography.Title level={3}>
        方法二、点击窗口右上角的菜单，找到【复制网址】，点击后打开您使用的浏览器粘贴到地址栏即可。
      </Typography.Title>
      <Image src="https://xtbs.ljsyy.net/resources/wechatBrowser/wechat-2.png" />
    </DrawerForm>
  );
};

export default WeChatDrawer;
